<template>
  <div class="home">
    <div class="box">
      <div class="left">
        <img src="http://localhost:8080/1.png" alt="">
      </div>
      <div class="right">
        <div class="con">
          <el-form :model="formData">
            <el-form-item>
              <el-input v-model="formData.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
           <el-button type="success" @click="onClick" class="btn">成功按钮</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      formData:{
        userName:"",
        password:""
      }
    }
  },
  methods: {
    onClick(){
          axios.post("http://ceshi5.dishait.cn/admin/login",{
              username:this.formData.userName,
              password:this.formData.password
          }).then((res)=>{
              console.log(res);
              var token=res.data.data.token;
              window.localStorage.setItem("token",token)
              this.$router.push("/")
          }).catch((error)=>{
              this.$message.error("登录失败");
              console.log(error)
          })
      }
  }
  }
</script>
<style scoped>
*{
  padding: 0;
  margin: 0;
}
  .box{
    width: 1240px;
    height: 564px;
    display: flex;
    border: 1px solid #000;
  }
  .left{
    width: 65%;
    height: 100%;
  }
  .left img{
    width: 100%;
    height: 100%;
  }
  .right{
    width: 35%;
    height: 100%;
    border: 1px solid #000;
  }
  .con{
    width: 90%;
    height: 300px;
    /* border: 1px solid #000; */
    margin-top: 200px;
    margin-left: 5%;
  }
  .el-input {
    width: 80%;
  }
  .el-button{
    width: 310px;
    height: 30px;
  }
</style>

